<template>
  <div class="maven-guide">
    <a-spin :spinning="localLoading">
      <div class="maven-guide-header">
        <div
          class="maven-guide-header-btn"
          v-for="item in listBtn"
          :key="item.key"
          :class="{ 'maven-guide-header-btn-active': item.key === active }"
          @click="handleClick(item.key)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="maven-guide-content">
        <div class="maven-guide-content-box" v-if="active === 'push'">
          <div class="guide-line">通过本指南快速设置仓库凭证，并完成制品文件的推送。</div>
          <div class="guide-title">步骤一：设置仓库凭证</div>
          <div class="guide-line">配置 <span class="guide-highlight">npm</span> 仓库的镜像源配置。</div>
          <div class="guide-code">
            <codeView title="设置 registry" :code="voucher" :dataValues="voucherValues" />
          </div>
          <div class="guide-line">登陆 <span class="guide-highlight">npm</span> 仓库并设置凭证。</div>
          <div class="guide-code">
            <codeView title="登陆" code="npm login" />
          </div>
          <div class="guide-line">
            输入以下用户名、密码和邮箱，邮箱可以填写任意符合格式的邮箱地址。
            为了您的仓库安全，用户名和密码已经隐藏。您可点击右上角直接复制，或者去除隐藏后手动复制。
          </div>
          <div class="guide-code">
            <codeView title="凭证" :code="stepOneCode" :dataValues="stepOneValue" :dataHides="stepOneHide" />
          </div>
          <div class="guide-title">步骤二：推送</div>
          <div class="guide-line">
            进入你的工程目录，设置好您的 <span class="guide-highlight">package.json</span>，执行以下指令完成推送。
          </div>
          <div class="guide-code">
            <codeView title="推送" code="npm publish" />
          </div>
        </div>
        <div class="maven-guide-content-box" v-if="active === 'pull'">
          <div class="guide-line">通过本指南快速设置仓库凭证，并完成制品文件的拉取。</div>
          <div class="guide-title">步骤一：设置仓库凭证</div>
          <div class="guide-line">配置 <span class="guide-highlight">npm</span> 仓库的镜像源配置。</div>
          <div class="guide-code">
            <codeView title="设置 registry" :code="voucher" :dataValues="voucherValues" />
          </div>
          <div class="guide-line">登陆 <span class="guide-highlight">npm</span> 仓库并设置凭证。</div>
          <div class="guide-code">
            <codeView title="登陆" code="npm login" />
          </div>
          <div class="guide-line">
            输入以下用户名、密码和邮箱，邮箱可以填写任意符合格式的邮箱地址。
            为了您的仓库安全，用户名和密码已经隐藏。您可点击右上角直接复制，或者去除隐藏后手动复制。
          </div>
          <div class="guide-code">
            <codeView title="凭证" :code="stepOneCode" :dataValues="stepOneValue" :dataHides="stepOneHide" />
          </div>
          <div class="guide-title">步骤二：拉取</div>
          <div class="guide-line">进入你的工程目录，执行以下指令完成推送。</div>
          <div class="guide-code">
            <codeView title="拉取" code="npm install [package]" />
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import { getRespositoryGuide } from '@/api/artifactRepository';
import { useArtifactRepositoryStore } from '@/store/modules/artifactRepository';
const artifactRepositoryStore = useArtifactRepositoryStore();
const { artifactObj } = artifactRepositoryStore;
import codeView from '../codeView.vue';
import * as CryptoUtils from '@/utils/cryptoUtils';
const listBtn = ref([
  {
    name: '推送',
    key: 'push',
  },
  {
    name: '拉取',
    key: 'pull',
  },
]);
interface CodeObjValue {
  repoUserName?: string;
  repoPassword?: string;
  repoAddress?: string;
}
const active = ref<string>('');

const voucherValues = ref<CodeObjValue>({
  repoAddress: '',
});
const voucher = ref<string>(`npm config set registry={repoAddress}`);

// 推送-步骤一传参给codeView的可变字段
const stepOneValue = ref<CodeObjValue>({
  repoUserName: '',
  repoPassword: '',
});
// 推送-步骤一可隐藏的字段
const stepOneHide = ref<Array<string>>(['repoUserName', 'repoPassword']);
const stepOneCode = ref<string>(`用户名:  {repoUserName} 
密码:  {repoPassword}`);
const localLoading = ref<boolean>(true);
const getGuide = async () => {
  localLoading.value = true;
  await getRespositoryGuide(artifactObj.uuid)
    .then((res) => {
      active.value = 'push';
      localLoading.value = false;
      stepOneValue.value.repoUserName = res.repoUserName;
      stepOneValue.value.repoPassword = CryptoUtils.decryptByRSA(res.repoPassword) || '';
      voucherValues.value.repoAddress = res.repoAddress;
    })
    .finally(() => {
      active.value = 'push';
      localLoading.value = false;
    });
};

onBeforeMount(() => {
  getGuide();
});

const handleClick = (key: string) => {
  active.value = key;
};
</script>

<style scoped lang="less">
.maven-guide {
  width: 100%;
  .maven-guide-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    background: #fff;
    .maven-guide-header-btn {
      border-radius: 4px;
      padding: 5px 18px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      background: rgba(0, 0, 0, 0.03);
      color: rgba(0, 0, 0, 0.6);
      font-weight: 400;
    }
    .maven-guide-header-btn-active {
      background: rgba(37, 144, 255, 0.1);
      color: #2590ff;
    }
  }
  .maven-guide-content {
    height: calc(100vh - 280px);
    overflow-y: auto;
    width: calc(100% + 40px);
    padding-right: 34px;
    .maven-guide-content-box {
      margin-top: 16px;
      .guide-line {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.8);
        font-weight: 400;
        margin-top: 4px;
        width: 90%;
        word-break: break-all;
      }
      .guide-code {
        margin: 16px 0;
      }
      .guide-title {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.8);
        font-weight: 600;
        line-height: 24px;
        margin-top: 40px;
      }
      .guide-highlight {
        background: rgba(0, 171, 8, 0.1);
        color: rgba(0, 171, 8);
        border-radius: 4px;
        padding: 0 2px;
        font-weight: 500;
        word-break: break-all;
      }
    }
  }
}
</style>
